import styles from "./index.module.scss";
import EchartsEL from "./echartsEL";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";

export default function AgePerson() {
  const xAxisData = ["25以下", "25-35", "35-45", "45-50", "50以上"];
  const seriesData = [10, 52, 200, 334, 390];
  const colorArr = [
    ["rgba(0, 147, 221, 1)", "rgba(255, 255, 255, 1)"],
    ["rgba(0, 147, 221, 1)", "rgba(0, 88, 255, 0.60)"],
    ["rgba(0, 147, 221, 1)", "rgba(0, 88, 255, 0.40)"],
    ["rgba(10, 49, 108, 0.60)", "rgba(27, 101, 155, 0.60)"],
  ];
  const theme = useSelector((state) => state.theme);
  const [textColor, setTextColor] = useState(
    !theme ? "#fff" : "rgba(37, 76, 112, 1)"
  );
  useEffect(() => {
    setTextColor(!theme ? "rgba(37, 76, 112, 1)" : "#fff");
  }, [theme]);
  return (
    <>
      <div className={styles.profit}>
        <div className={styles.profitRight}>
          <EchartsEL
            xAxisData={xAxisData}
            colorArr={colorArr}
            seriesData={seriesData}
            textColor={textColor}
          ></EchartsEL>
        </div>
      </div>
    </>
  );
}
